import React, { useState } from 'react'
import icon from '@/assets/images/home/subject.png'
import { Button, ProgressBar } from 'antd-mobile'
import "./subjectsItem.less"
import { useNavigate } from 'react-router-dom'

// 父传子的类型约束：
interface Iprop {
    data: ExemItem
}

export default function SubjectsItem({ data }: Iprop) {
    let steup = Math.round(Math.random() * data.itemCount)
    const [done, setDone] = useState(steup)
    const [percent, setPercent] = useState<number>(done / data.itemCount * 100)
    const navigate = useNavigate()

    return (
        <div className='sub-item'>
            <div className="left">
                <img className='icon' src={icon} alt="" />
            </div>
            <div className="center">
                <h4>{data.title}</h4>
                <div> {done} / {data.itemCount} 题</div>
                <ProgressBar percent={percent} />
            </div>
            <div className="right">
                <Button color="primary" onClick={() => navigate('/select/' + data.actionCode)} >练习</Button>
            </div>
        </div>
    )
}
